<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九宫格</title>
</head>

<body>
    <div class="bigBox">
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <style>
        .bigBox {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;

            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .box {
            display: grid;
            width: 600px;
            height: 600px;
            grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(3, 1fr);
        }

        .box div {
            background-image: url(./1.png);
            position: relative;
            background-size: 600px 600px; /* 背景图的尺寸 */
            transition: 0.2s; /* 动画时间 */
            box-shadow: 0 0 20px rgb(94, 93, 93) ;
        }

        /* 设计
        1 每一列的 x 是一样的          每一行的 Y 是一样的
        2 第一列 可以用 3n+1 进行选择 第二列是3n+2 第三列是3n+3 也就是3n
        3 列需要反转思维 第三行 -n+9 (987654321)  然后是前6个 -n+6 (654321) -3+3 (321)
        4 注意 background-position-x 或者 y 要用 负的且可用 -200% 之类
        5 注意n是从0开始和js一样但是 nth-child又是从1开始的
        6 设置背景图的尺寸用 background-size 
        */
        .box div:nth-child(3n + 1) {
            background-position-x: 0;
            left: -20px;
        }

        .box div:nth-child(3n + 2) {
            background-position-x: -200px;
            left: 0;
        }
        
        .box div:nth-child(3n) {
            background-position-x: -400px;
            left: 20px;
        }

        .box div:nth-child(-n + 9) {
            background-position-y: -400px;
            top: 20px;
        }

        .box div:nth-child(-n + 6) {
            background-position-y: -200px;
            top: 0;
        }

        .box div:nth-child(-n + 3) {
            background-position-y: 0px;
            top: -20px;
        }

        .box:hover.box div{ 
            left: 0;
            top: 0;
            box-shadow: none ;
        }
    </style>
</body>

</html>